<template>
  <div class="box">
    <el-form  label-width="80px" :inline="true">
        <el-row>
          <el-form-item label="课程名称">
              <el-select v-model="search.course_id" filterable remote reserve-keyword placeholder="请输入课程名称" :remote-method="remoteMethod" :loading="loading" @change="handleChange" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="期次">
            <nice-select v-model="search.course_period_id" placeholder="请选择期次" clearable :options="periodOptions"></nice-select>
          </el-form-item>
          <el-form-item label="讲次">
            <nice-select v-model="search.course_lesson_id" placeholder="请选择讲次" clearable :options="lessonOptions"></nice-select>
          </el-form-item>
          <el-form-item label="学生姓名">
                <el-input v-model="search.real_name" placeholder="请输入学生姓名" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="评价时间">
               <el-date-picker
                  v-model="search.create_time"
                 type="datetimerange"
                 value-format ="yyyy-MM-dd HH:mm:ss"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
          </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">搜索</el-button>
          </el-form-item>
      </el-row>
    </el-form>
    <b>总评价：<span class="margin-left20">教学水平：{{totalComment}}</span><span class="margin-left20">课件内容：{{courseContent}}</span></b>
    <nice-table :data="list"  :columns="columns" :pagination="pagination" class="margin-top20"></nice-table>
  </div>
</template>
<script>
import base from '@/views/base.vue'
import {cascadeQuery} from '@/api/api.js'
import {getAllCourse, getPeriodByCouseId} from '@/api/user.js'
import {getCommentTotal} from '@/api/comment'
export default {
  name: 'allocation-guidance',
  extends: base,
  data () {
    return {
      search: {
        create_time: '', // 评价时间
        course_id: '', // 课程名称
        course_period_id: '', // 期次
        real_name: '', // 学生
        course_lesson_id: ''// 讲次
      },
      periodOptions: [],
      totalComment: 0,
      courseContent: '无',
      lessonOptions: [],
      options: [],
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        handleCurrentChange: this.handleCurrentChange,
        handleSizeChange: this.handleSizeChange
      },
      list: [],
      loading: false,
      columns: [
        {
          label: '学生姓名',
          prop: 'student_name',
          extends: [
            {
              clickFunction: val => {
                this.viewDetail(val)
              }
            }
          ]
        },
        {
          label: '课程名称',
          prop: 'course_name'
        },
        {
          label: '期次',
          prop: 'period_sort'
        },
        {
          label: '讲次',
          prop: 'lesson_sort'
        },
        {
          label: '教学水平',
          prop: 'education'
        },
        {
          label: '课件内容',
          prop: 'content'
        },
        {
          label: '评价时间',
          prop: 'create_time'
        }
      ]
    }
  },
  activated () {
    this.getCommentTotal()
    this.getDataList()
  },
  methods: {
    async getCommentTotal () {
      let res = await getCommentTotal({
        'nice_course_comment.course_id': this.search.course_id,
        'nice_course_comment.course_period_id': this.search.course_period_id,
        'nice_course_comment.course_lesson_id': this.search.course_lesson_id,
        'nice_course_comment.start_date': this.search.create_time[0],
        'nice_course_comment.end_date': this.search.create_time[1],
        'nice_course_comment.name': this.search.real_name
      })
      if (res[0]) { return }
      if (res[1] && res[1].code === 0) {
        if (res[1].data.list && res[1].data.list.length) {
          Object.keys(res[1].data.list[0]).forEach(ele => {
            console.log(233, ele, ele.indexOf('content'))
            if (ele.indexOf('content') !== -1) {
              this.courseContent = res[1].data.list[0][ele]
            }
            if (ele.indexOf('education') !== -1) {
              this.totalComment = res[1].data.list[0][ele]
            }
          })
        }
      } else {
        this.$message.error(res[1].msg)
      }
    },
    async getDataList () {
      let res = await cascadeQuery({
        'table_name': 'nice_course_comment',
        'condition': {
          'course_id': this.search.course_id,
          'course_period_id': this.search.course_period_id,
          'course_lesson_id': this.search.course_lesson_id,
          'create_time': this.search.create_time.length ? [{'&gt;=': this.search.create_time[0]}, {'&lt;=': this.search.create_time[1]}] : '',
          'student.real_name': [{like: this.search.real_name}]
        },
        'member': 'period_sort,lesson_sort,student_name,course_name',
        'by_order': 'create_time desc',
        'by_page': {'currPage': this.pagination.pageNum, 'pageSize': this.pagination.pageSize}
      })
      if (res[0]) { return }
      let data = res[1]
      if (data && data.code === 0) {
        this.pagination.total = data.data.totalCount
        if (data.data.list && data.data.list.length) {
          data.data.list.forEach(ele => {
            ele.period_sort = ele.period_sort ? '第' + ele.period_sort + '期' : ''
            ele.lesson_sort = ele.lesson_sort ? '第' + ele.lesson_sort + '讲' : ''
          })
        }
        this.list = data.data.list
      }
    },
    onSubmit () {
      this.pagination.pageNum = 1
      this.getCommentTotal()
      this.getDataList()
    },
    handleChange () {
      this.getPeriodByCouseId()
      this.getLessionListByCouseId()
    },
    async getLessionListByCouseId () {
      let res = await cascadeQuery({
        'table_name': 'nice_course_lesson',
        'condition': {
          'course_id': this.search.course_id
        },
        'member': 'merterial_num',
        'by_order': 'sort'
      })
      if (res[0]) {}
      let data = res[1]
      if (data && data.code === 0) {
        this.lessonOptions = data.data && data.data.length && data.data.map(ele => {
          return {
            label: ele.sort,
            value: ele.id
          }
        })
      } else {
        this.$message.error(data.msg)
      }
    },
    async getPeriodByCouseId () {
      let res = await getPeriodByCouseId({'nice_course_period.course_id': this.search.course_id})
      if (res[0]) {}
      let data = res[1]
      if (data && data.code === 0) {
        this.periodOptions = data.data.list && data.data.list.length && data.data.list.map(ele => {
          return {
            label: ele.sort,
            value: ele.id
          }
        })
      } else {
        this.$message.error(data.msg)
      }
    },
    async remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        let res = await getAllCourse({'nice_course.name': query})
        if (res[0]) {
          return
        }
        let data = res[1]
        this.loading = false
        if (data && data.code === 0) {
          if (data.data.pageList.list && data.data.pageList.list.length) {
            this.options = data.data.pageList.list.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            })
          } else {
            this.options = []
          }
        }
      }
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.getDataList()
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getDataList()
    },
    viewDetail (row) {
      this.$router.push({
        name: 'student-detail',
        params: {id: row.student_id}
      })
    }
  }

}
</script>
<style lang="scss" scoped>

</style>
